<template>
  <view class="resources-wrapper">
    <view class="resources-header">
      <view class="resources-header-left">
        <text>现场资源</text>
      </view>
    </view>

    <!-- 资源列表 -->
    <scroll-view class="resources-content" scroll-y refresher-enabled :refresher-triggered="refreshing" @refresherrefresh="onRefresh" @scrolltolower="onLoadMore" lower-threshold="100">
      <view v-if="loading && resourceList.length === 0" class="loading-wrapper">
        <text>加载中...</text>
      </view>

      <view v-else-if="resourceList.length > 0" class="resources-list">
        <view v-for="(item, index) in resourceList" :key="item.id || index" class="resource-card">
          <!-- 卡片头部 -->
          <view class="card-header">
            <view class="card-title">
              <text class="device-name">{{ item.bid }}</text>
              <text class="device-num">公司名称: {{ item.company || '--' }}</text>
            </view>
            <view class="card-status">
              <view class="edit-btn" @click="editResource(item)">
                <text class="edit-text">编辑</text>
              </view>
            </view>
          </view>

          <!-- 卡片内容 -->
          <view class="card-content">
            <view class="info-row">
              <text class="label">分包公司:</text>
              <text class="value">{{ item.subcontractCompany || '--' }}</text>
            </view>

            <view class="info-row">
              <text class="label">管理人员:</text>
              <text class="value">{{ item.managerNum || '--' }}</text>
            </view>

            <view class="info-row">
              <text class="label">作业人员:</text>
              <text class="value">{{ item.workNum || '--' }}</text>
            </view>

            <view class="info-row">
              <text class="label">设备名称描述:</text>
              <text class="value">{{ item.deviceName || '--' }}</text>
            </view>
            <view class="info-row">
              <text class="label">设备数量:</text>
              <text class="value">{{ item.deviceNum || '--' }}</text>
            </view>

            <view class="info-row">
              <text class="label">钢筋总量:</text>
              <text class="value">{{ item.rebar || '--' }}</text>
            </view>
            <view class="info-row">
              <text class="label">水泥总量:</text>
              <text class="value">{{ item.cement || '--' }}</text>
            </view>
          </view>

          <!-- 卡片底部 -->
          <view class="card-footer">
            <text class="time-text">创建时间: {{ item.createTime || '--' }}</text>
            <text class="modify-time">修改时间: {{ item.modifyTime || '--' }}</text>
          </view>
        </view>
      </view>

      <view v-else class="empty-wrapper">
        <text>暂无数据</text>
      </view>

      <!-- 加载更多提示 -->
      <view v-if="loadingMore" class="loading-more">
        <text>加载中...</text>
      </view>

      <view v-if="noMore && resourceList.length > 0" class="no-more">
        <text>没有更多数据了</text>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { getResourcePage } from '@/api/resources'

const resourcePage = ref(null)
const resourceList = ref([])
const loading = ref(false)
const refreshing = ref(false)
const loadingMore = ref(false)
const noMore = ref(false)
const currentPage = ref(1)
const pageSize = ref(4)

const getResourcePageData = async (isRefresh = false, isLoadMore = false) => {
  if (isRefresh) {
    currentPage.value = 1
    noMore.value = false
  }

  if (!isLoadMore) {
    loading.value = true
  } else {
    loadingMore.value = true
  }

  const postData = {
    pageNo: currentPage.value,
    pageSize: pageSize.value,
    moduleName: ''
  }

  const res = await getResourcePage(postData)

  if (!isLoadMore) {
    loading.value = false
  } else {
    loadingMore.value = false
  }

  if (refreshing.value) {
    refreshing.value = false
  }

  if (res && res.code === 0 && res.data) {
    resourcePage.value = res.data

    if (isRefresh || currentPage.value === 1) {
      resourceList.value = res.data.data || []
    } else {
      resourceList.value = [...resourceList.value, ...(res.data.data || [])]
    }

    // 判断是否还有更多数据
    if (res.data.data && res.data.data.length < pageSize.value) {
      noMore.value = true
    } else {
      noMore.value = false
    }
  }
}

// 下拉刷新
const onRefresh = async () => {
  refreshing.value = true
  await getResourcePageData(true, false)
}

// 上拉加载更多
const onLoadMore = async () => {
  if (loadingMore.value || noMore.value) return

  currentPage.value++
  await getResourcePageData(false, true)
}

const editResource = (item) => {
  uni.navigateTo({
    url: '/pages/workbenches/resources/edit?id=' + item.id
  })
}

onMounted(() => {
  getResourcePageData()

  // 监听编辑页面的刷新事件
  uni.$on('refreshResourceList', () => {
    getResourcePageData(true, false)
  })
})

// 页面卸载时移除事件监听
onUnmounted(() => {
  uni.$off('refreshResourceList')
})
</script>

<style scoped>
.resources-wrapper {
  padding: 20rpx;
  background-color: #f9f9f9;
  height: 100vh;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.resources-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  margin-bottom: 20rpx;
  flex-shrink: 0;
}

.resources-header-left text {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

.resources-content {
  flex: 1;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.loading-wrapper,
.empty-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 100rpx 0;
  color: #999;
}

.resources-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
  width: 100%;
  box-sizing: border-box;
}

.resource-card {
  background: #fff;
  border-radius: 16rpx;
  padding: 24rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
  border: 1rpx solid #f0f0f0;
  width: 100%;
  box-sizing: border-box;
  overflow: hidden;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 20rpx;
  padding-bottom: 16rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.card-title {
  flex: 1;
}

.device-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 8rpx;
}

.device-num {
  font-size: 24rpx;
  color: #666;
}

.card-status {
  display: flex;
  align-items: center;
}

.edit-btn {
  padding: 10rpx 20rpx;
  background: #40a3ff;
  border-radius: 20rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.edit-text {
  font-size: 24rpx;
  color: #fff;
}

.card-content {
  margin-bottom: 20rpx;
}

.info-row {
  display: flex;
  align-items: center;
  margin-bottom: 12rpx;
  padding: 8rpx 0;
}

.info-row:last-child {
  margin-bottom: 0;
}

.label {
  font-size: 28rpx;
  color: #666;
  width: 200rpx;
  flex-shrink: 0;
}

.value {
  font-size: 28rpx;
  color: #333;
  flex: 1;
  word-break: break-all;
  overflow: hidden;
  text-overflow: ellipsis;
}

.card-footer {
  padding-top: 16rpx;
  border-top: 1rpx solid #f0f0f0;
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}

.time-text,
.modify-time {
  font-size: 24rpx;
  color: #999;
}

/* 加载更多样式 */
.loading-more,
.no-more {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30rpx 0;
  color: #999;
  font-size: 24rpx;
}

/* 防止页面滚动 */
page {
  height: 100%;
  overflow: hidden;
}
</style>
